<template>
  <div id="tipsBtn">
    <el-dialog
        :title="operationType==1?'操作':'批量操作'"
        :visible="operationFlag"
        :close-on-click-modal="false"
        width="910px"
        :before-close="handleClose">
      <div class="button-box">
        <el-button type="primary" class="ryqk" @click="hanldeClick">人员清空</el-button>
        <el-button type="primary" class="rycz" @click="hanlde2Click">人员重置</el-button>
        <el-button type="primary" class="gm" @click="hanlde3Click">关门</el-button>
        <el-button type="primary" class="ss" @click="hanlde4Click">上锁 </el-button>
        <el-button type="primary" class="km" @click="hanlde5Click">开门</el-button>
        <el-button type="primary" class="ks" @click="hanlde6Click">开锁</el-button>
        <el-button type="primary" class="back" @click="hanlde7Click">恢复出厂</el-button>
        <el-button type="primary" class="cq" @click="hanlde8Click">重启</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { devBatchOperation } from '@/api/sbgl'//引入接口
export default {
  name: "cz",
  data() {
    return {
      form: {
        command: 0,
      }
    }
  },
  props: {
    operationType:{
      type: Number,
      default: 1
    },
    operationRow: {
      type: Array,
      default: () => []
    },
    operationFlag: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    handleClose(){
      this.$emit('update:operationFlag', false);
    },
    devBatchOperation(params){
      devBatchOperation(params).then((res) => {
        console.log(res);
        if (res.code === 200) {
          // 操作成功
          this.W.$tips("success", this.i18n.t('Operation successful'));
          // 关闭弹框
          this.handleClose()
        }
      }).catch(err => {
        // 操作失败
        this.W.$tips('warning', this.i18n.t('Failed operation'));
      }).finally(() => {

      })
    },
    hanlde1Click(){
      console.log(1);
    },
    option(num){
      this.form.command = num;
      this.form.deviceIds = [];
      if (this.operationRow.length === 0) {
        this.form.deviceIds[0] = this.deviceCode[0].id;
        this.form.creatorId[0] = JSON.parse(localStorage.getItem("userInfo")).userId;
      } else {
        this.operationRow.forEach(item=>{
          this.form.deviceIds.push(item.id);
          this.form.creatorId = JSON.parse(localStorage.getItem("userInfo")).userId;
        })
      }
      this.devBatchOperation(this.form);
    },
    hanldeClick(){
      this.option(1);
    },
    hanlde2Click(){
      this.option(2);
    },
    hanlde3Click(){
      this.option(3);
    },
    hanlde4Click(){
      this.option(4);
    },
    hanlde5Click(){
      this.option(5);
    },
    hanlde6Click(){
      this.option(6);
    },
    hanlde7Click(){
      this.option(7);
    },
    hanlde8Click(){
      this.option(8);
    },
  },
  mounted() {
    console.log(99, this.operationRow);
  }
}
</script>

<style>
#tipsBtn {
  .button-box button {
    width: 100px;
    height: 100px;
    background-color: #DAE3FD;
    border: none;
    border-radius: 15px;
    color: #000;
    align-items: center;
    justify-content: center;
    span {
      color: #999;
      display: block;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 100px;
    }
  }
  .ryqk {
    background: url('~@/assets/common/img/ryqk.png') center center no-repeat;
  }
  .rycz {
    background: url('~@/assets/common/img/rycz.png') center center no-repeat;
  }
  .gm {
    background: url('~@/assets/common/img/gm.png') center center no-repeat;
  }
  .km {
    background: url('~@/assets/common/img/km.png') center center no-repeat;
  }
  .ss {
    background: url('~@/assets/common/img/ss.png') center center no-repeat;
  }
  .ks {
    background: url('~@/assets/common/img/ks.png') center center no-repeat;
  }
  .back {
    background: url('~@/assets/common/img/back.png') center center no-repeat;
  }
  .cq {
    background: url('~@/assets/common/img/cq.png') center center no-repeat;
  }
}
</style>
